<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>优惠券详情</span>
                <el-button
                    style="float: right; padding: 3px 0"
                    type="text"
                    @click="goBack"
                >返回
                </el-button
                >
            </div>
            <el-descriptions title="" direction="vertical" :column="4" border size="small">
                <el-descriptions-item label="标题">
                    {{ couponInfo.title }}
                </el-descriptions-item>
                <el-descriptions-item label="过期时间">
                    {{ couponInfo.expiryTime }}
                </el-descriptions-item>
                <el-descriptions-item label="数量">
                    总数量{{ couponInfo.totalQuantity }}，剩余数量{{ couponInfo.remainQuantity }}
                </el-descriptions-item>
                <el-descriptions-item label="背景图片">
                    <div>
                        <el-image
                            style="width: 80px; height: 80px"
                            :src="couponInfo.backgroundPicUrl"></el-image>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="使用说明">
                    {{ couponInfo.description }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-divider></el-divider>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>适用门店列表</span>
            </div>
            <el-table
                id="mainTable"
                :data="shopData"
                size="small"
                header-cell-class-name="tableHeaderStyle"
                :row-class-name="tableRowClassName">
                <el-table-column
                    prop="name"
                    label="门店名称">
                </el-table-column>
                <el-table-column
                    prop="category"
                    label="门店分类">
                </el-table-column>
                <el-table-column
                    prop="city"
                    label="城市">
                </el-table-column>
                <el-table-column
                    prop="contactPhone"
                    label="联系电话">
                </el-table-column>
                <el-table-column
                    prop="labels"
                    label="标签">
                </el-table-column>
                <el-table-column
                    prop="operateTime"
                    label="营业时间">
                </el-table-column>
                <el-table-column
                    label="操作"
                    fixed="right"
                    width="80px">
                    <template v-slot="scope">
                        <div>
                            <el-button @click="unLinkShop(scope.row)" v-if="scope.row.linkFlag" type="text"
                                       size="small">
                                解除关联
                            </el-button>
                            <el-button @click="onLinkShop(scope.row)" v-else type="text" size="small">
                                关联门店
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                small
                background
                :hide-on-single-page="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="condition.page"
                :page-sizes="[10, 20, 30, 40, 50, 100]"
                :page-size.sync="condition.rows"
                layout="sizes, prev, pager, next"
                :total.sync="condition.total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import {couponLinkShop, couponUnLinkShop, getCouponById, getCouponShopsById, getShopByPage} from '@/api/api'

export default {
    name: "CouponDetail",
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            },
            // 门店数据
            shopData: [],

            // 优惠券关联门店数据
            couponShopData: [],
            // 优惠券详情
            couponInfo: {},
            // 优惠券ID
            id: '',
        }
    },
    methods: {
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            if (row.linkFlag) {
                return 'success-row';
            }
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        // 获取表格数据
        getData: function () {
            getCouponById({"id": this.id}).then(data => {
                this.couponInfo = data.body;
            });
            this.getShops();
        },
        // 获取关联门店列表
        getShops: function () {
            getCouponShopsById({"id": this.id}).then(data => {
                this.couponShopData = data.body;
                getShopByPage(this.condition).then(data => {
                    this.shopData = data.body.rows;
                    this.condition.total = data.body.total;
                    for (let i = 0; i < this.couponShopData.length; i++) {
                        for (let j = 0; j < this.shopData.length; j++) {
                            if (this.couponShopData[i].shopId === this.shopData[j].id) {
                                this.shopData[j].linkFlag = true;
                                break;
                            }
                        }
                    }
                });
            });
        },
        onLinkShop: function (row) {
            let param = {};
            param.couponId = this.id;
            param.shopId = row.id;
            couponLinkShop(param).then(data => {
                this.$message({
                    type: 'success',
                    message: '关联成功!'
                });
                this.getShops();
            })
        },
        unLinkShop: function (row) {
            let param = {};
            param.couponId = this.id;
            param.shopId = row.id;
            couponUnLinkShop(param).then(data => {
                this.$message({
                    type: 'success',
                    message: '解除关联成功!'
                });
                this.getShops();
            })
        },
        goBack() {
            // 编程式导航
            this.$router.go(-1);
        },
    },
    created() {
        this.id = this.$route.query.id;
        this.getData();
    }
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>
